<!-- @format -->

<script setup>
	import { ref } from 'vue'
	// 图片路径数组
	const images = [
		'https://bit-1256306791.cos.ap-chengdu.myqcloud.com/fffa0f9be4b071da45d9a0c2.jpg',
		'https://bit-1256306791.cos.ap-chengdu.myqcloud.com/fffa0fa3e4b071da45d9a0c3.jpg',
		'https://bit-1256306791.cos.ap-chengdu.myqcloud.com/fffa10ace4b071da45d9a0c4.jpg'
	]

	// 响应式下标
	const i = ref(0)

	// 点击右侧按钮
	const next = () => {
		// 下标自增
		i.value++
		// 边界判断
		if (i.value === images.length) {
			i.value = 0
		}
	}

	// 数组的下标：最小是零，最大是数组的长度减 1

	// 点击左侧按钮
	const prev = () => {
		// 下标自减
		i.value--
		// 边界判断
		if (i.value === -1) {
			i.value = images.length - 1
		}
	}
</script>

<template>
	<div class="bit-banner">
		<img
			:src="images[i]"
			alt="比特轮播图" />
		<div class="ctrl">
			<a
				href="javascript:;"
				class="btn prev"
				@click="prev"
				>&lt;</a
			>
			<a
				href="javascript:;"
				class="btn next"
				@click="next"
				>&gt;</a
			>
		</div>
	</div>
</template>

<style>
	* {
		margin: 0;
	}
	a {
		text-decoration: none;
		color: #fff;
	}

	.bit-banner {
		position: relative;
		width: 1200px;
		height: 337px;
		margin: 150px auto;
	}

	.bit-banner .ctrl .btn {
		position: absolute;
		top: 50%;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		font-size: 14px;
		line-height: 30px;
		text-align: center;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.3);
	}

	.bit-banner .ctrl .btn.prev {
		left: 15px;
	}

	.bit-banner .ctrl .btn.next {
		right: 15px;
	}
</style>
